section{
  >.row{
    >div{
    height:460px;
    width:1170px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    >.imgBox{
      width:7020px;
      height:460px;
      list-style: none;
      display: flex;
      position: absolute;
      top:0;
      left:0;
      >li{
        width:1170px;
        height: 100%;
        >img{
          height:100%;
          width:100%;
        }
      }
    }

    >ol{
      position: absolute;
      bottom:10px;
      right:15px;
      display: flex;
      height:20px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      >li{
        list-style: none;
        background-color:rgba(0, 0, 0, 0.4);
        height:10px;
        width:10px;
        border: {
          radius:50%;
          width:2px;
          style:solid;
          color:rgba(255, 255, 255, 0.3);
        };
        &.active{
          background-color:rgba(255, 255, 255, 0.4) ;
          border-color: rgba(0, 0, 0, 0.4);
        }
      }
    }

    >div{
      height:70px;
      width:40px;
      position: absolute;
      line-height: 70px;
      text-align: center;
      color:#ddd;
      >i{
        font-size: 30px;
        pointer-events:none;
      }
      &:first-of-type{
        left:195px;
        top:50%;
        transform:translateY(-50%);
      }
      &:last-of-type{
        right:0;
        top:50%;
        transform:translateY(-50%);
      }
      &:hover{
        color:#fff;
        background-color: rgba(0, 0, 0, 0.4);
      }
    }
    }
  }
}

article{
  margin-top: 15px;
  margin-bottom: 28px;
  >.row{
    >div{
      height:170px;
      margin-right:32px ;
      padding:0;
      &:last-child {
        margin-left:1px;
        margin-right: 0;
      }
      >img{
        width:100%;
        height:100%;
        cursor: pointer;
        transition:0.5s ;
        &:hover{
          -webkit-box-shadow: 0px 14px 15px 0px rgba(204,204,204,1);
          -moz-box-shadow: 0px 14px 15px 0px rgba(204,204,204,1);
          box-shadow: 0px 14px 15px 0px rgba(204,204,204,1);
        }
      }
      &.col-lg-2{
        background-color: rgb(95, 87, 80);
        display: flex;
        flex-wrap: wrap;
        padding: 2px;
        >div{
          width:33%;
          height:50%;
          color:#ccc;
          font-size: 12px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-evenly;
          position: relative;
          cursor: pointer;
          &:hover{
            color:#fff;
          }
          &::after{
            content: "";
            width:40px;
            height:1px;
            background-color: rgb(102, 94, 87);
            position:absolute;
            left:13px;
            top:4px;
          }
          &::before{
            content: "";
            width:1px;
            height:40px;
            background-color: rgb(102, 94, 87);
            position:absolute;
            left:1px;
            top:13px;
          }
        }
      }
    }
  }
}

main{
  background-color: #f5f5f5;
  >div{
    >.row{
      >.banner{
        height:120px;
        margin: {
          top:30px;
          bottom:30px
        }
        >img{
          width:100%;
          height:100%;
          cursor: pointer;
        }
      }
      >.top1{
        height:680px;
        margin-bottom: 20px;
        >.top{
          height:58px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          >p{
            font-size: 18px;
            display: flex;
            align-items: center;
            cursor: pointer;
            &:first-child{
              font-size: 24px;
            }
            &:last-child{
              &:hover{
                color:#FF6A00;
                >i{
                  color:#FF6A00;
                }
              }
            }
            >i{
              font-size: 24px;
              color:#ccc;
              
            }
          }
        }
        >.bottom{
          height:622px;
          >div{
            background-color: #fff;
            height:300px;
            width:19%;
            margin-right: 1.25%;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            align-items: center;
            padding: 20px;
            transition:0.5s ;
            cursor: pointer;
            >.price{
              >span{
                color:#FF6A00;
              }
              >del{
                color:#999;
              }
            }
        &:hover{
          -webkit-box-shadow: 0px 14px 15px 0px rgba(204,204,204,1);
          -moz-box-shadow: 0px 14px 15px 0px rgba(204,204,204,1);
          box-shadow: 0px 14px 15px 0px rgba(204,204,204,1);
        }
            >span{
              color:#FF6A00;
            }
            >img{
              height:150px;
              width:150px;
            }
            >div{
              display: flex;
              align-items: center;
              justify-content: space-around;
              flex-direction: column;
              >p{
                width:182px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                display: flex;
                align-items: center;
                flex-direction: column;
                &:last-child{
                  font-size: 13px;
                  color:#ccc;
                }
              }
            } 
            &:first-child{

              >img{
                height:100%;
                width:100%;
              }
            }
            &:first-child{
              height: 100%;
            }
            &:nth-child(2),&:nth-child(3),&:nth-child(4),&:nth-child(5){
              margin-bottom:22px;            
            }
            &:nth-child(5),&:nth-child(9){
              margin-right: 0;
            }
          }
        }
      }
      >.top2{
        height:680px;
        margin-bottom: 20px;
        >.top{
          height:58px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 18px;
          >div{
            cursor: pointer;
            span{
              margin-left: 20px;   
              &.active{
                color:#FF6A00;
                border-bottom:2px solid #FF6A00;
                &::before{
                  content: "";
                  height:2px;
                  width:44px;
                  border-radius: 4px;
                  background-color: #FF6A00;
                  position: absolute;
                  bottom:-2px;
                  left:-4px;
              }
              }
            }
          }
        }
        >.bottom{
          height:622px;
          display: flex;
          justify-content: space-between;
          >.left{
            height:100%;
            width:19%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            >div{
              background-color: #fff;
              height:100%;
              width:100%;
              cursor: pointer;
              >img{
                width:100%;
                height:80%;
              }
              transition:0.5s ;
        &:hover{
          -webkit-box-shadow: 0px 14px 15px 0px rgba(204,204,204,1);
          -moz-box-shadow: 0px 14px 15px 0px rgba(204,204,204,1);
          box-shadow: 0px 14px 15px 0px rgba(204,204,204,1);
        }
            }
          }
          >.right{
            display: flex;
            height:622px;
            width:81%;
            flex-wrap: wrap;
            align-content: space-between;
            padding:0;
            
            >div{
              width:23%;
              height:300px;
              display: flex;
              align-items: center;
              justify-content: space-around;
              flex-direction: column;
              background-color: #fff;
              transition:0.5s ;
              margin-left:18px;
              >.price{
                >span{
                  color:#FF6A00;
                }
                >del{
                  color:#999;
                }
              }
        &:not(:last-child):hover{
          -webkit-box-shadow: 0px 14px 15px 0px rgba(204,204,204,1);
          -moz-box-shadow: 0px 14px 15px 0px rgba(204,204,204,1);
          box-shadow: 0px 14px 15px 0px rgba(204,204,204,1);
        }
              cursor: pointer;
              >img{
                width:150px;
                height:150px;
              }
              >div{
                >p{
                  width:182px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  display: flex;
                  align-items: center;
                  flex-direction: column;
                  &:last-child{
                    font-size: 13px;
                    color:#ccc;
                  }
                }
              }
              &:last-child{
                background-color: #f5f5f5;
                display: flex;
                padding:20px 0;
                flex-direction: column;
                justify-content: space-between;
                padding:0;
                cursor: default;
                >div{
                  height:143px;
                  width:100%;
                  display: flex;
                  justify-content: space-around;
                  background-color: #fff;
                  align-items: center;
                  cursor: pointer;
                  transition:0.5s ;
        &:hover{
          -webkit-box-shadow: 0px 14px 15px 0px rgba(204,204,204,1);
          -moz-box-shadow: 0px 14px 15px 0px rgba(204,204,204,1);
          box-shadow: 0px 14px 15px 0px rgba(204,204,204,1);
        }
                  &.top{
                    >div{
                      display: flex;
                      justify-content: space-around;
                      flex-direction: column;
                      >p:first-child{
                        text-align: center;
                        width:87px;
                        height:58px;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        overflow: hidden;
                        -webkit-line-clamp: 3;
                      }
                      >img{
                        height:80px;
                        width:80px;
                      }
                    }
                  }
                  .iconfont{
                    color:#FF6A00;
                    font-size: 50px;
                    font-weight: 900;
                  }
                }
              }
            } 
          }
        }
      }
      >.bottom1,.bottom2,.bottom3,.bottom4,.bottom5,.bottom6{
        height:680px;
        margin-bottom: 20px;
        >.top{
          height:58px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 18px;
          >div{
            cursor: pointer;
            span{
              margin-left: 20px;
              &.active{
                color:#FF6A00;
                border-bottom: 2px solid #FF6A00 ;
              }
            }
          }
        }
        >.bottom{
          height:622px;
          display: flex;
          justify-content: space-between;
          >.left{
            height:100%;
            width:19%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            >div{
              background-color: #fff;
              height:300px;
              width:100%;
              cursor: pointer;
              >img{
                width:100%;
                height:100%;
              }
              transition:0.5s ;
        &:hover{
          -webkit-box-shadow: 0px 14px 15px 0px rgba(204,204,204,1);
          -moz-box-shadow: 0px 14px 15px 0px rgba(204,204,204,1);
          box-shadow: 0px 14px 15px 0px rgba(204,204,204,1);
        }
            }
          }
          >.right{
            display: flex;
            height:622px;
            width:81%;
            flex-wrap: wrap;
            align-items: flex-end;
            align-content: space-between;
            padding:0;
            
            >div{
              width:23%;
              height:300px;
              display: flex;
              align-items: center;
              justify-content: space-around;
              flex-direction: column;
              background-color: #fff;
              transition:0.5s ;
              margin-left:18px;
        &:not(:last-child):hover{
          -webkit-box-shadow: 0px 14px 15px 0px rgba(204,204,204,1);
          -moz-box-shadow: 0px 14px 15px 0px rgba(204,204,204,1);
          box-shadow: 0px 14px 15px 0px rgba(204,204,204,1);
        }
              cursor: pointer;
              >img{
                width:150px;
                height:150px;
              }
              >.price{
                >span{
                  color:#FF6A00;
                }
                >del{
                  color:#999;
                }
              }
              
              >div{
                >p{
                  width:182px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  display: flex;
                  align-items: center;
                  flex-direction: column;
                  &:last-child{
                    font-size: 13px;
                    color:#ccc;
                  }
                  
                }
              }
              &:last-child{
                background-color: #f5f5f5;
                display: flex;
                padding:20px 0;
                flex-direction: column;
                justify-content: space-between;
                padding:0;
                cursor: default;
                >div{
                  height:143px;
                  width:100%;
                  display: flex;
                  justify-content: space-around;
                  background-color: #fff;
                  align-items: center;
                  cursor: pointer;
                  transition:0.5s ;
        &:hover{
          -webkit-box-shadow: 0px 14px 15px 0px rgba(204,204,204,1);
          -moz-box-shadow: 0px 14px 15px 0px rgba(204,204,204,1);
          box-shadow: 0px 14px 15px 0px rgba(204,204,204,1);
        }
                  &.top{
                    padding:20px;
                    >div{
                      display: flex;
                      justify-content: space-around;
                      flex-direction: column;
                      >p:first-child{
                        text-align: center;
                        width:87px;
                        height:58px;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        overflow: hidden;
                        -webkit-line-clamp: 3;
                      }
                      >p:last-child{
                        color:#FF6A00;
                      }
                      >img{
                        height:80px;
                        width:80px;
                      }
                    }
                  }
                  .iconfont{
                    color:#FF6A00;
                    font-size: 50px;
                    font-weight: 900;
                  }
                }
              }
            } 
          }
        }
      }
    }
  
  }
}
aside{
  position:fixed;
  height:204px;
  width:27px;
  display: flex;
  flex-direction: column;
  bottom:100px;
  right:0px;
  text-align: center;
  justify-content: space-evenly;
  background-color: rgba(255,255,255,.8);
  line-height: 40px;
}
aside div{
  height:40px;
  box-sizing: border-box;
  border:1px solid #f5f5f5;
  cursor: pointer;
  border:1px solid #f5f5f5;
  &:hover{
    color:#FF6A00;
  }
}
.sct{
  position:fixed;
  height:40px;
  width:25px;
  background-color: #fff;
  text-align: center;
  line-height: 40px;
  cursor: pointer;
  border:1px solid #f5f5f5;
  right:0;
  bottom:50px;
  display: none;
  &:hover{
    color:#FF6A00;
  }
}
